<template>
	<!-- 法人乡村餐馆记账 -->
	<view class="container">
		<uni-transition :duration="1000" :mode-class="'slide-bottom'"  :show="true" >
			<view class="" v-if="object.adopt_id==2" style="text-align: center;margin: 20rpx 0;">
				<text style="color:#FC3E2C;font-weight: bold;" >未通过原因:{{object.fail}}</text>
			</view>
		</uni-transition>
		<form @submit="formSubmit">
			<uni-transition :duration="1000"  :mode-class="'slide-right'"  :show="true" >
			<view class="container-back" style="padding-top: 0;margin-top: 20rpx;" >
				<view class="back padding20  " >
					<view class="fontWeight" style="margin-bottom: 20rpx;">日期</view>
					<u-line color="#dadada" style=""></u-line>
					<view class="" @click="dateChange" style="display: flex;justify-content: space-between;margin-top: 20rpx;">
						<text>{{date}}</text>
						<img style="width: 20rpx;height:20rpx;" src="../static/right.png" alt="">
					</view>
				</view>
			</view>
			<view class="container-back">
				<view class="back padding20 ">
					<view class="travel-list flex Jbetween Acenter ">
						<view class="flex Acenter " style="flex: 5;">
							<text class="fontWeight " style="color: #515151;"><text
									class="">本月营业收入</text></text>
						</view>
						<view class="flex Acenter" style="flex: 5;">
							<input type="text" placeholder="点击输入" class="padding-left30" name="operating" style="flex:1" :value="operating"/>
							<text style="text-align: right;">人民币元</text>
						</view>
					</view>
				</view>
			</view>
			<view class="container-back" style="padding-top:0">
				<view class="back padding20 ">
					<view class="travel-list flex Jbetween Acenter ">
						<view class="flex Acenter " style="flex: 5;">
							<text class="fontWeight " style="color: #515151;"><text
									class="">本月接待游客人数</text></text>
						</view>
						<view class="flex Acenter" style="flex: 5;">
							<input type="text" placeholder="点击输入" class="padding-left30" name="received" :value="received" />
							<text style="text-align: right;">人次</text>
						</view>
					</view>
				</view>
			</view>
			<view class="container-back" style="padding-top:0">
				<view class="back padding20 ">
					<view class="travel-list flex Jbetween Acenter ">
						<view class="flex Acenter " style="flex: 5;">
							<text class="fontWeight " style="color: #515151;"><text
									class="">本月员工总数</text></text>
						</view>
						<view class="flex Acenter" style="flex: 5;">
							<input type="text" placeholder="点击输入" class="padding-left30" name="totalnumber"  :value="totalnumber"/>
							<text style="text-align: right;">人</text>
						</view>
					</view>
				</view>
			</view>
			<view class="container-back" style="padding-top:0">
				<view class="back padding20 ">
					<view class="travel-list flex Jbetween Acenter ">
						<view class="flex Acenter " style="flex: 5;">
							<text class="fontWeight" style="color: #515151;"><text
									class="">本月员工平均工资</text></text>
						</view>
						<view class="flex Acenter" style="flex: 5;">
							<input type="text" placeholder="点击输入" class="padding-left30" name="employees" style="flex:1" :value="employees"/>
							<text style="=text-align: right;">人民币元</text>
						</view>
					</view>
			    </view>
			</view >
			<view class="container-back" style="padding-top:0">
				<view class="back padding20 ">
					<view class="travel-list flex Jbetween Acenter ">
						<view class="flex Acenter " style="flex: 5;">
							<text class="fontWeight " style="color: #515151;"><text
									class="">本月用水量</text></text>
						</view>
						<view class="flex Acenter" style="flex: 5;">
							<input type="text" placeholder="点击输入" class="padding-left30" name="water_con" style="flex:1"  :value="water_con"/>
							<text style="ftext-align: right;">吨</text>
						</view>
					</view>
			    </view>
			</view >
			<view class="container-back" style="padding-top:0">
				<view class="back padding20 ">
					<view class="travel-list flex Jbetween Acenter ">
						<view class="flex Acenter " style="flex: 5;">
							<text class="fontWeight " style="color: #515151;"><text
									class="m">本月用电量</text></text>
						</view>
						<view class="flex Acenter" style="flex: 5;">
							<input type="text" placeholder="点击输入" class="padding-left30" name="electricity" style="flex:1" :value="electricity"/>
							<text style="text-align: right;">度</text>
						</view>
					</view>
			    </view>
			</view >
			<view class="container-back" style="padding-top:0">
				<view class="back padding20 ">
					<view class="flex Jbetween padding-bottom20 ">
						<view class="fontWeight">本月燃气量</view>
					</view>
					<view class="travel-list flex Jbetween Acenter page">
						<view class="flex Acenter " style="flex: 5;">
							<view class="block-back inline-block travel-img flex Jcenter Acenter">
								<image style="width: 60rpx;height: 60rpx;" src="../../../static/tianranqi.png" mode="">
								</image>
							</view>
							<text class="fontWeight" style="color: #515151;">天然气</text>
						</view>
						<view class="flex Acenter" style="flex: 5;">
							<input style="flex: 1;" type="digit" placeholder="点击输入" class="padding-left30" :value="natural_gas"
								name="natural_gas" />
							<text style="text-align: right;">(标准立方米)</text>
						</view>
					</view>
					<view class="travel-list flex Jbetween Acenter page">
						<view class="flex Acenter " style="flex: 5;">
							<view class="block-back inline-block travel-img flex Jcenter Acenter">
								<image style="width: 50rpx;height: 50rpx;" src="../../../static/meiqi.png" mode="">
								</image>
							</view>
							<text class="fontWeight" style="color: #515151;">煤气</text>
						</view>
						<view class="flex Acenter" style="flex: 5;">
							<input style="flex: 1;" type="digit" placeholder="点击输入" class="padding-left30" :value="coal_gas"
								name="coal_gas" />
							<text style="text-align: right;">(字)</text>
						</view>
					</view>
					<view class="travel-list flex Jbetween Acenter page">
						<view class="flex Acenter " style="flex: 5;">
							<view class="block-back inline-block travel-img flex Jcenter Acenter">
								<image style="width: 50rpx;height: 50rpx;" src="../../../static/qita.png" mode="">
								</image>
							</view>
							<text class="fontWeight" style="color: #515151;">其它</text>
						</view>
						<view class="flex Acenter" style="flex: 5;">
							<input style="flex: 1;" type="text" placeholder="具体名目" class="padding-left30"  :value="other"
								name="other" @input="otherChange"/>
							<text style="text-align: right;"></text>
						</view>
					</view>
			    </view>
			</view >
			<view class="container-back" style="padding-top:0">
				<view class="back padding20 ">
					<view class="travel-list flex Jbetween Acenter " style="margin-top: 20rpx;">
						<view class="flex Acenter " style="flex: 5;">
							<text class="fontWeight" style="color: #515151;"><text
									class="">本月租赁费用</text></text>
						</view>
						<view class="flex Acenter" style="flex: 5;">
							<input type="text" placeholder="点击输入" class="padding-left30" name="rental" style="flex:1" :value="rental"/>
							<text style="text-align: right;">人民币元</text>
						</view>
					</view>
			    </view>
			</view >
			<view class="container-back" style="padding-top:0">
				<view class="back padding20 ">
					<view class="travel-list flex Jbetween Acenter ">
						<view class="flex Acenter " style="flex: 5;">
							<text class="fontWeight " style="color: #515151;"><text
									class="">本月维修（护）费用</text></text>
						</view>
						<view class="flex Acenter" style="flex: 5;">
							<input type="text" placeholder="点击输入" class="padding-left30" name="mainten" style="flex: 1;" :value="mainten"/>
							<text style="text-align: right;">人民币元</text>
						</view>
					</view>
			    </view>
			</view >
			</uni-transition>
			<view class="button-submit">
				<view class="button">
					<button formType="submit" style="margin-top: 0; width: 100%">{{object.adopt_id==2?'重新提交':"提交"}}</button>
				</view>
			</view>
		</form>
		<!-- 日期选择器 -->
		  <u-picker mode="time" v-model="isPicderShow" :params="params" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date:'请选择',
				 isPicderShow: false,
				object:{
					adopt_id: "", //审核是否通过
					fail: "记账内容需重新提交，有问题请联系联络人。", //未通过原因
					type_id:""//1  参团   2  非参团
				},
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				operating:'',//本月营业收入
				received:'',//本月接待游客人数
				totalnumber:'',//本月员工总数
				employees:'',//本月员工平均工资
				water_con:'',//用水量
				electricity:'',//本月用电量
				coal_gas:'',//本月煤气
				natural_gas:'',//本月天然气
				other:'',//本月其它燃气量
				rental:'',//本月租赁费用
				mainten:'',//本月维修费用
				user_type: '', //用户类型  法人 自然人 联络人
				id: '', //用户id,
				year: '', //年份
				month: '', //月份
				other: "", //其它
				otherName: '', //具体名目
				timestamp:'',//当前日期时间
				jizhang_score:null,//记账累计分数
				ID:""//重新提交传递的ID
			}
		},
		onLoad(options) {
			var myDate = new Date();//获取系统当前时间
			this.timestamp=myDate .getDate(); //获取当前日(1-31)
			var  year=myDate.getFullYear()
			var  month=myDate.getMonth()+1
			if(this.timestamp<10){//10号以内积分10分 否则积分1分
				this.jizhang_score=3
			}else{
				this.jizhang_score=1
			}
			
			let userInfo=uni.getStorageSync("userInfo")
			
			var ID=userInfo[0].id//用户id赋值
			
			if(userInfo){
				if(userInfo.user_type==="法人"){
					this.user_type=1
				}else if(userInfo.user_type==="联络人"){
					this.user_type=2
				}
				this.business_specific_type=userInfo[0].business_specific_type
			}
			var params= JSON.parse(options.item)
			console.log('获取历史记账页传递过来的列表参数paramsparamsparams',params)
			if(params.clickType==='new'){//说明是重新提交跳转过来的
				console.log('走的重新提交跳转过来的', params)
				this.date=year+" 年 "+params.month+" 月 "
				this.year=year
				this.month=params.month
				this.object.adopt_id = params.adopt_id   //1  待审核   2  未通过  3.已通过
				this.object.fail = params.fail?params.fail:"记账内容需重新提交，有问题请联系联络人。" //失败原因
				this.object.type_id=params.type_id//法人记账类型
				this.id=params.id
				console.log('最终赋值后的参数',params,this.object)
				
				let obj={
					id: params.id,
					user_type : params.user_type,
					month:params.month,
					keyword:params.col == 1 ? 'totel' : 'turnover',
					type_id:params.type_id
				}
				// 调用详情赋值数据
				this.getBillDetails(obj)
				
			}else if(params.clickType==='add'){ 
				console.log('正常点击加号跳转过来的正常点击加号跳转过来的正常点击加号跳转过来的正', params)
				this.id=userInfo[0].id
				console.log('month',month)
				if(month==1){
					this.month=12
					this.year=year-1//去上个年份
				}else{
					this.year=year
					this.month=month
				}
				// 赋值年份和月份
				this.date=year+" 年 "+month+" 月 "
				
			}else if(params.clickType==='month'){
				console.log('点击月份跳转进来德点击月份跳转进来德点击月份跳转进来德点击月份跳转进来德', params)
				if(params.month){//如果有值说明是点击了日历月份。。否则就正常传递当前鱼粉
					let newMonth=Number(params.month)
					console.log('有值',newMonth)
					this.month=newMonth
				    // 赋值年份和月份
					this.date=params.year+" 年 "+params.month+" 月 "
					this.year=params.year
					
				}else {//否则赋值当前年份和月份 
					this.date=year+" 年 "+month+" 月 "
				}
				this.id=params.id
				console.log('之后',this.month)
			}else{
				console.log('联络人帮忙记账过来的',params)
				this.id=params.id
				this.year=params.year
				this.month=params.month
				this.business_specific_type=params.business_specific_type
				this.jizhang_score=params.jizhang_score
				this.user_type=params.user_type
				this.date=params.year+" 年 "+params.month+" 月 "//日期自动赋值
			}
		},
		methods: {
			otherNameChange: function(e) {
				this.otherName = e.detail.value
			},
			otherChange: function(e) {
				// this.other = e.detail.value + '-' + this.otherName
				this.other = e.detail.value
			},
			// 获取详情数据
			getBillDetails(obj) {
				console.log('即将请求数据',obj)
				this.ID=obj.id
				this.$.tipLoading('加载中')
				var _self = this;
				uni.request({
					method: 'POST',
					url: 'https://jizhang.xqyu.cn/index.php/api/index/get_bill_details',
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:obj,
					success: function(res) {
						console.log('res',res)
						if(res.data.code==1){
							let result=res.data.data
							console.log('获取乡村参观列表详情数据获取乡村参观列表详情数据获取乡村参观列表详情数据获取乡村参观列表详情数据',result)
							_self.operating=result.operating//本月营业收入,
							_self.received=result.received//本月接待游客人数,
							_self.totalnumber=result.totalnumber//本月员工总数
							_self.employees=result.employees//本月员工平均工资
							_self.water_con=result.water_con//用水量
							_self.electricity=result.electricity//本月用电量
							_self.coal_gas=result.coal_gas//本月煤气
							_self.natural_gas=result.natural_gas//本月天然气
							_self.other=result.other//本月其它燃气量
							_self.rental=result.rental//本月租赁费用
							_self.mainten=result.mainten//本月维修费用
							_self.$.hideLoading()
						}else{
							_self.$.hideLoading()
							_self.$.toast(res.data.msg)
						}
					}
				})
			},
			// 日期选择器打开
			dateChange:function(){
				this.isPicderShow=true
				console.log('打开',this.isPicderShow)
			},
			// 日期选择器确定
			confirm:function(e){
				console.log('日期选择器确定',e)
				let year=Number(e.year) 
				let month= Number(e.month)
				var myDate = new Date();//获取系统当前时间
				let newYear=myDate.getFullYear()
				let newMonth=myDate.getMonth()+1
				console.log('nia',year)
				console.log('nia1',newYear)
				if(year>newYear){
					this.$.toast('不支持之后年份记账')
					return
				}
				if(month>newMonth){
					this.$.toast('不支持之后月份记账')
					return
				}
				this.date=year+" 年 "+month+" 月 "
				this.month=month
				
			},
			// 表单提交
			formSubmit: function(e) {
				console.log('获取表单提交的月份',this.month)
				var that = this;
				// e.detail.value.other = e.detail.value.other + '-' + e.detail.value.otherName
				e.detail.value.year = this.year
				e.detail.value.month = this.month
				e.detail.value.jizhang_score=this.jizhang_score
				e.detail.value.uid = this.id
				e.detail.value.type_id = this.business_specific_type
				e.detail.value.flag = this.user_type
				e.detail.value.adopt_id=1  //1  待审批   2  未通过  3  已通过
				e.detail.value.id=this.ID?this.ID:""  //重新提交传递的ID
				let data = e.detail.value
				let {
					operating,
					received,
					totalnumber,
					employees,
					water_con,
					electricity,
					otherName,
					other,
					natural_gas,
					coal_gas,
					rental,
					mainten
				} = data //结构对象
				if (!operating) {
					this.$.toast('请输入本月营业收入')
					return
				}
				if (!received) {
					this.$.toast('请输入本月接待游客人数')
					return
				}
				if (!totalnumber) {
					this.$.toast('请输入本月员工总数')
					return
				}
				if (!employees) {
					this.$.toast('请输入本月员工平均工资')
					return
				}
				if (!water_con) {
					this.$.toast('请输入本月用水量')
					return
				}
				if (!electricity) {
					this.$.toast('请输入本月用电量')
					return
				}
				if (!natural_gas) {
					this.$.toast('请输入天然气')
					return
				}
				if (!coal_gas) {
					this.$.toast('请输入煤气')
					return
				}
				if (!other) {
					this.$.toast('请输入其它')
					return
				}
				// if (this.other == "") {
				// 	this.$.toast('请输入其它')
				// 	return
				// }
				if (!rental) {
					this.$.toast('请输入本月租赁费用')
					return
				}
				if (!mainten) {
					this.$.toast('请输入本月维修（护）费用')
					return
				}
				this.formRequest(e.detail.value)
			},
			formRequest: function(params) {
				
				console.log('获取提交的鱼粉',this.month)
				if(this.object.adopt_id==2){
					// 只有重新提交的时候才删除uid  传id
					delete params.uid
				}
				
				// delete params.otherName //删除对象属性
				var that = this
				uni.showModal({
					title: '温馨提示',
					content: '确认提交后不可修改',
					success: function(res) {
						if (res.confirm) {
							uni.request({
								method: 'POST',
								url: 'https://jizhang.xqyu.cn/index.php/api/legal/get_country',
								dataType: 'json',
								header: {
									'content-type': 'application/x-www-form-urlencoded'
								},
								data: params,
								success: function(res) {
									console.log('最终是否成功了', res.data)
									if (res.data.code == 1) {
										that.$.successToast(res.data.msg)
										//返回上一页
										setTimeout(function() {
											uni.navigateBack({
												delta: 1
											})
										}, 1500)
									} else {
										that.$.toast(res.data.msg)
									}
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					fail: function(err) {
						console.log('捕获异常',err)
					}
				});
			}
		},

	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F5F5F5;

		.container-back {
			border-radius: 15rpx;
			padding: 20rpx;

			.travel-list {
				border-radius: 15rpx;
				padding: 10rpx;
				margin-bottom: 20rpx;

				.travel-img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 15rpx;
					margin-right: 20rpx;
				}

				.before::before {
					content: '';
					width: 15rpx;
					height: 15rpx;
					border-radius: 50%;
					background-color: #1D69FC;
					position: absolute;
					margin-top: 12rpx;
					// margin-left: -30rpx;
				}
			}

			.travel-img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 15rpx;
			}
		}

		.button-submit {
			background-color: #FFFFFF;
			position: fixed;
			margin-right: 20rpx;
			bottom: 0;
			width: 100%;
			padding-bottom: 30rpx;
			z-index: 1000;
			padding-left: 20rpx;
			padding-right: 20rpx;
			padding-top: 20rpx;

			.button {
				border-radius: 15rpx;

				button {
					background: linear-gradient(159deg, #80e6fc 0%, #0051ff 99%);
					// width: 100%;
					color: #FFFFFF;
					font-size: 30rpx;
				}
			}
		}
	}
</style>
